<template>
	<view>
		<!-- 消息 -->
		<view :style="'display:' + (index == 0 ? 'block' : 'none')">
			<view-index ref="view-index"></view-index>
		</view>
		<!-- 通讯录 -->
		<view :style="'display:' + (index == 1 ? 'block' : 'none')">
			<view-tongxunlu ref="view-tongxunlu"></view-tongxunlu>
		</view>
		<!-- 发现 -->
		<view :style="'display:' + (index == 2 ? 'block' : 'none')">
			<view-faxian ref="view-faxian"></view-faxian>
		</view>
		<!-- 我的 -->
		<view :style="'display:' + (index == 3 ? 'block' : 'none')">
			<view-wode ref="view-wode"></view-wode>
		</view>
		<!-- 底部导航 -->
		<view v-if="navigatorType == 1" class="footerTab">
			<view v-for="(item,i) in tabBar" :key="i" @click="clickTab(i)" class="footerTab_li">
				<view class="iconv">
					<image :src="index == i ? item.select_icon : item.icon"></image>
					<view v-if="item.textnum > 0" class="textnum">{{item.textnum > 99 ? 99 : item.textnum}}</view>
				</view>
				<view :class="'btntext ' + (index == i ? 'on ' : '')">{{item.bottomTitle}}</view>
			</view>
		</view>
		<view v-if="navigatorType == 1" style="height: 60px;"></view>
	</view>
</template>
<script>
	var app = getApp();
	export default {
		data() {
			return {
				tabBar: [
					{
						bottomTitle: '消息',
						icon: '/static/wx/n0.png',
						select_icon: '/static/wx/n0_on.png',
						is_load: false,
						textnum: 0
					},
					{
						bottomTitle: '通讯录',
						icon: '/static/wx/n01.png',
						select_icon: '/static/wx/n01_on.png',
						is_load: false,
						textnum: 0
					},
					{
						bottomTitle: '发现',
						icon: '/static/wx/n02.png',
						select_icon: '/static/wx/n02_on.png',
						is_load: false,
						textnum: 0
					},
					{
						bottomTitle: '我',
						icon: '/static/wx/n03.png',
						select_icon: '/static/wx/n03_on.png',
						is_load: false,
						textnum: 0
					},
				],
				index: 0,
				isReady: 0
			}
		},
		onLoad(options) {
			if(options.index){
				this.index = options.index;
			}
		},
		onReady() {
			this.viewOnload();
			this.isReady = 1;
		},
		onShow() {
			if(this.isReady == 1){
				this.viewOnshow();
			}
		},
		onPullDownRefresh: function() {
		    var self = this;
			self.viewOnRefresh();
		},
		onReachBottom: function() {
		    var self = this;
			self.viewOnBottom();
		},
		onPageScroll: function (e) {
			var self = this;
			self.viewOnScroll(e);
		},
		onBackPress(){
			// #ifdef APP-PLUS
				if(plus.os.name == 'Android'){
					var main = plus.android.runtimeMainActivity();
					main.moveTaskToBack(false);
					return true;
				}
			// #endif
		},
		watch: {
			chatListNum: {
				deep: true, //深度监听可见听对象中的元素变化例:obj.id
				immediate: false, //在进入页面时，第一次绑定值，不会立刻执行监听，只有数据发生改变才会执行handler中的操作
				handler(val) {
					//watch事件
					if (val > 0) {
						this.tabBar[0].textnum = val;
					} else {
						this.tabBar[0].textnum = 0;
					}
				}
			},
			friendApply: {
				deep: true, //深度监听可见听对象中的元素变化例:obj.id
				immediate: false, //在进入页面时，第一次绑定值，不会立刻执行监听，只有数据发生改变才会执行handler中的操作
				handler(val) {
					//watch事件
					if (val.count && val.count > 0) {
						this.tabBar[1].textnum = val.count;
					} else {
						this.tabBar[1].textnum = 0;
					}
				}
			},
			topicReply: {
				deep: true, //深度监听可见听对象中的元素变化例:obj.id
				immediate: false, //在进入页面时，第一次绑定值，不会立刻执行监听，只有数据发生改变才会执行handler中的操作
				handler(val) {
					//watch事件
					if (val.count && val.count > 0) {
						this.tabBar[2].textnum = val.count;
					} else {
						this.tabBar[2].textnum = 0;
					}
				}
			},
		},
		computed: {
			chatListNum() {
				return this.$store.state.chatListNum;
			},
			topicReply() {
				return this.$store.state.topicReply;
			},
			friendApply() {
				return this.$store.state.friendApply;
			},
			navigatorType() {
				return this.$store.state.navigatorType;
			},
		},
		methods: {
			viewOnload(){
				var self = this;
				var index = self.index;
				var tabBar = self.tabBar;
				switch(index){
					case 0:
						self.$refs['view-index'].viewLoad();
						self.$refs['view-index'].viewShow();
					break;
					case 1:
						self.$refs['view-tongxunlu'].viewLoad();
						self.$refs['view-tongxunlu'].viewShow();
					break;
					case 2:
						self.$refs['view-faxian'].viewLoad();
						self.$refs['view-faxian'].viewShow();
					break;
					case 3:
						self.$refs['view-wode'].viewLoad();
						self.$refs['view-wode'].viewShow();
					break;
				}
				tabBar[index].is_load = true;
				self.tabBar = tabBar;
			},
			viewOnshow(){
				var self = this;
				var index = self.index;
				var tabBar = self.tabBar;
				switch(index){
					case 0:
						self.$refs['view-index'].viewShow();
					break;
					case 1:
						self.$refs['view-tongxunlu'].viewShow();
					break;
					case 2:
						self.$refs['view-faxian'].viewShow();
					break;
					case 3:
						self.$refs['view-wode'].viewShow();
					break;
				}
			},
			viewOnRefresh(){
				var self = this;
				var index = self.index;
				var tabBar = self.tabBar;
				switch(index){
					case 0:
						self.$refs['view-index'].viewRefresh();
					break;
					case 1:
						self.$refs['view-tongxunlu'].viewRefresh();
					break;
					case 2:
						self.$refs['view-faxian'].viewRefresh();
					break;
					case 3:
						self.$refs['view-wode'].viewRefresh();
					break;
				}
			},
			viewOnBottom(){
				var self = this;
				var index = self.index;
				var tabBar = self.tabBar;
				switch(index){
					case 0:
						self.$refs['view-index'].viewBottom();
					break;
					case 1:
						self.$refs['view-tongxunlu'].viewBottom();
					break;
					case 2:
						self.$refs['view-faxian'].viewBottom();
					break;
					case 3:
						self.$refs['view-wode'].viewBottom();
					break;
				}
			},
			viewOnScroll(e){
				var self = this;
				var index = self.index;
				var tabBar = self.tabBar;
				switch(index){
					case 0:
						self.$refs['view-index'].viewScroll(e);
					break;
					case 1:
						self.$refs['view-tongxunlu'].viewScroll(e);
					break;
					case 2:
						self.$refs['view-faxian'].viewScroll(e);
					break;
					case 3:
						self.$refs['view-wode'].viewScroll(e);
					break;
				}
			},
			clickTab(i){
				if(i != this.index){
					this.index = i;
					if(this.tabBar[this.index].is_load){
						this.viewOnshow();
					}else{
						this.viewOnload();
					}
				}
			}
		}
	}
</script>
<style>
	.footerTab{
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		z-index: 999;
		display: flex;
		background: #f7f7f7;
		height: 55px;
	}
	.footerTab_li{
		flex: 1;
		text-align: center;
		margin-top: 5px;
	}
	.footerTab_li .iconv{
		position: relative;
		display: inline-block;
	}
	.footerTab_li .iconv image{
		width: 26px;
		height: 26px;
		vertical-align: bottom;
	}
	.footerTab_li .iconv .textnum{
		position: absolute;
		top: -3px;
		right: -10px;
		width: 18px;
		height: 18px;
		text-align: center;
		line-height: 18px;
		font-size: 12px;
		border-radius: 100%;
		background: red;
		color: #ffffff;
	}
	.footerTab_li .btntext{
		font-size: 14px;
	}
	.footerTab_li .on{
		color: #09C160 !important;
	}
</style>